/**
 * 个股排行榜主组件
 */

import React, { useState } from 'react';
import { useStockRanking } from '../hooks/useStockRanking';
import { RankingType, StockRankingData } from '@shared/types/market';
import RankingTabs from './RankingTabs';
import RankingTable from './RankingTable';
import { formatRelativeTime } from '@shared/utils';

// 示意数据
const mockStockData: Record<RankingType, StockRankingData[]> = {
  top_gainers: [
    { rank: 1, code: '600519', name: '贵州茅台', current_price: 1789.50, change_amount: 89.45, change_pct: 5.26, volume: 12000000, turnover: 21480000000 },
    { rank: 2, code: '000858', name: '五粮液', current_price: 156.78, change_amount: 7.23, change_pct: 4.83, volume: 28000000, turnover: 4389840000 },
    { rank: 3, code: '002475', name: '立讯精密', current_price: 34.56, change_amount: 1.56, change_pct: 4.73, volume: 56000000, turnover: 1935360000 },
    { rank: 4, code: '300750', name: '宁德时代', current_price: 234.67, change_amount: 10.45, change_pct: 4.66, volume: 45000000, turnover: 10560150000 },
    { rank: 5, code: '601012', name: '隆基绿能', current_price: 23.45, change_amount: 1.02, change_pct: 4.55, volume: 67000000, turnover: 1571150000 },
    { rank: 6, code: '000333', name: '美的集团', current_price: 67.89, change_amount: 2.87, change_pct: 4.42, volume: 34000000, turnover: 2308260000 },
    { rank: 7, code: '600036', name: '招商银行', current_price: 34.12, change_amount: 1.43, change_pct: 4.37, volume: 89000000, turnover: 3036680000 },
    { rank: 8, code: '601318', name: '中国平安', current_price: 45.67, change_amount: 1.89, change_pct: 4.32, volume: 78000000, turnover: 3562260000 },
    { rank: 9, code: '000001', name: '平安银行', current_price: 12.34, change_amount: 0.51, change_pct: 4.31, volume: 123000000, turnover: 1517820000 },
    { rank: 10, code: '600887', name: '伊利股份', current_price: 28.90, change_amount: 1.19, change_pct: 4.30, volume: 45000000, turnover: 1300500000 },
  ],
  top_losers: [
    { rank: 1, code: '688981', name: '中芯国际', current_price: 45.67, change_amount: -3.45, change_pct: -7.02, volume: 34000000, turnover: 1552780000 },
    { rank: 2, code: '002371', name: '北方华创', current_price: 234.56, change_amount: -16.78, change_pct: -6.68, volume: 23000000, turnover: 5394880000 },
    { rank: 3, code: '688008', name: '澜起科技', current_price: 56.78, change_amount: -3.89, change_pct: -6.41, volume: 18000000, turnover: 1022040000 },
    { rank: 4, code: '300059', name: '东方财富', current_price: 12.34, change_amount: -0.82, change_pct: -6.23, volume: 156000000, turnover: 1925040000 },
    { rank: 5, code: '002594', name: '比亚迪', current_price: 245.67, change_amount: -15.89, change_pct: -6.08, volume: 67000000, turnover: 16459890000 },
    { rank: 6, code: '300124', name: '汇川技术', current_price: 67.89, change_amount: -4.23, change_pct: -5.87, volume: 45000000, turnover: 3055050000 },
    { rank: 7, code: '002230', name: '科大讯飞', current_price: 45.67, change_amount: -2.78, change_pct: -5.74, volume: 56000000, turnover: 2557520000 },
    { rank: 8, code: '300142', name: '沃森生物', current_price: 34.56, change_amount: -2.08, change_pct: -5.68, volume: 34000000, turnover: 1175040000 },
    { rank: 9, code: '000725', name: '京东方A', current_price: 3.45, change_amount: -0.20, change_pct: -5.48, volume: 234000000, turnover: 807300000 },
    { rank: 10, code: '603259', name: '药明康德', current_price: 78.90, change_amount: -4.56, change_pct: -5.47, volume: 23000000, turnover: 1814700000 },
  ],
  most_active: [
    { rank: 1, code: '000725', name: '京东方A', current_price: 3.45, change_amount: -0.02, change_pct: -0.58, volume: 450000000, turnover: 1552500000 },
    { rank: 2, code: '600519', name: '贵州茅台', current_price: 1789.50, change_amount: 12.34, change_pct: 0.69, volume: 380000000, turnover: 68001000000 },
    { rank: 3, code: '300059', name: '东方财富', current_price: 12.34, change_amount: 0.23, change_pct: 1.90, volume: 345000000, turnover: 4257300000 },
    { rank: 4, code: '601012', name: '隆基绿能', current_price: 23.45, change_amount: 0.45, change_pct: 1.96, volume: 312000000, turnover: 7316400000 },
    { rank: 5, code: '000001', name: '平安银行', current_price: 12.34, change_amount: -0.12, change_pct: -0.96, volume: 298000000, turnover: 3677320000 },
    { rank: 6, code: '002594', name: '比亚迪', current_price: 245.67, change_amount: 3.45, change_pct: 1.43, volume: 276000000, turnover: 67804920000 },
    { rank: 7, code: '300750', name: '宁德时代', current_price: 234.67, change_amount: -2.34, change_pct: -0.99, volume: 254000000, turnover: 59606180000 },
    { rank: 8, code: '600036', name: '招商银行', current_price: 34.12, change_amount: 0.56, change_pct: 1.67, volume: 243000000, turnover: 8291160000 },
    { rank: 9, code: '601318', name: '中国平安', current_price: 45.67, change_amount: -0.78, change_pct: -1.68, volume: 234000000, turnover: 10686780000 },
    { rank: 10, code: '688981', name: '中芯国际', current_price: 45.67, change_amount: -1.23, change_pct: -2.62, volume: 221000000, turnover: 10093070000 },
  ],
  top_turnover: [
    { rank: 1, code: '600519', name: '贵州茅台', current_price: 1789.50, change_amount: 12.34, change_pct: 0.69, volume: 380000000, turnover: 68001000000 },
    { rank: 2, code: '002594', name: '比亚迪', current_price: 245.67, change_amount: 3.45, change_pct: 1.43, volume: 276000000, turnover: 67804920000 },
    { rank: 3, code: '300750', name: '宁德时代', current_price: 234.67, change_amount: -2.34, change_pct: -0.99, volume: 254000000, turnover: 59606180000 },
    { rank: 4, code: '300750', name: '宁德时代', current_price: 234.67, change_amount: 10.45, change_pct: 4.66, volume: 45000000, turnover: 10560150000 },
    { rank: 5, code: '601318', name: '中国平安', current_price: 45.67, change_amount: -0.78, change_pct: -1.68, volume: 234000000, turnover: 10686780000 },
    { rank: 6, code: '688981', name: '中芯国际', current_price: 45.67, change_amount: -1.23, change_pct: -2.62, volume: 221000000, turnover: 10093070000 },
    { rank: 7, code: '600036', name: '招商银行', current_price: 34.12, change_amount: 0.56, change_pct: 1.67, volume: 243000000, turnover: 8291160000 },
    { rank: 8, code: '601012', name: '隆基绿能', current_price: 23.45, change_amount: 0.45, change_pct: 1.96, volume: 312000000, turnover: 7316400000 },
    { rank: 9, code: '000858', name: '五粮液', current_price: 156.78, change_amount: 7.23, change_pct: 4.83, volume: 28000000, turnover: 4389840000 },
    { rank: 10, code: '300059', name: '东方财富', current_price: 12.34, change_amount: 0.23, change_pct: 1.90, volume: 345000000, turnover: 4257300000 },
  ],
};

const StockRanking: React.FC = () => {
  const [activeTab, setActiveTab] = useState<RankingType>('top_gainers');

  const { data: rankingData, isLoading, isError, dataUpdatedAt } = useStockRanking({
    type: activeTab,
    limit: 10,
  });

  // 使用真实数据或示意数据
  const displayData = rankingData?.stocks && rankingData.stocks.length > 0 
    ? rankingData.stocks 
    : mockStockData[activeTab];

  return (
    <div
      style={{
        backgroundColor: 'white',
        padding: '24px',
        borderRadius: '8px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
      }}
    >
      {/* 标题 */}
      <div
        style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          marginBottom: '16px',
        }}
      >
        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
          <h3 style={{ margin: 0, fontSize: '16px', fontWeight: '600', color: '#333' }}>
            📊 个股排行
          </h3>
          {isError && (
            <span
              style={{
                fontSize: '12px',
                color: '#faad14',
                backgroundColor: '#fffbe6',
                padding: '4px 8px',
                borderRadius: '4px',
                fontWeight: 'normal',
              }}
            >
              示意数据
            </span>
          )}
        </div>
        {dataUpdatedAt && !isError && (
          <span style={{ fontSize: '12px', color: '#999' }}>
            更新于 {formatRelativeTime(dataUpdatedAt)}
          </span>
        )}
      </div>

      {/* 标签页 */}
      <RankingTabs activeTab={activeTab} onChange={setActiveTab} />

      {/* 内容区 */}
      {isLoading ? (
        <div style={{ padding: '40px', textAlign: 'center' }}>
          <div
            style={{
              width: '40px',
              height: '40px',
              border: '4px solid #f0f0f0',
              borderTopColor: '#1890ff',
              borderRadius: '50%',
              animation: 'spin 1s linear infinite',
              margin: '0 auto 12px',
            }}
          />
          <div style={{ color: '#999', fontSize: '14px' }}>加载中...</div>
        </div>
      ) : (
        <RankingTable data={displayData} type={activeTab} />
      )}
    </div>
  );
};

export default StockRanking;

